<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>插值语法</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.5.13/vue.global.js"></script>
    </head>
    <body>
        <div id="app">
            <h3>姓名：{{ person.name }}</h3>
            <h3>年龄：{{ person.age }}</h3>
            <h3>喜欢：{{ person.likes }}</h3>
            <button v-on:click="updatePerson">更新人员信息</button><br>
        </div>
        <script>
            const { createApp } = Vue
            const app = createApp({
                data() {
                    return {
                        title: '',
                        question: '',
                        person: {
                            name: 'cgs',
                            age: 18,
                            likes: ['吃饭', '睡觉', '打豆豆']
                        }
                    }
                },

                /*watch回调默认是在数据发生变化时自动调用，如果我们需要在初始化时就执行一次监听的回调，那么要如何实现呢？
                  Vue的watch语法也支持这种场景需求，但是用法有些许差别，watch的属性不能再是一个函数了，需要是一个配置对象，并通过handler配置来指定监听回调函数。
                  同时我们可以通过配置immediate为true来指定监听回调函数在初始化过程中执行第1次，当然在被监听数据发生改变时也会执行。*/
                watch: {
                    person: {
                        handler(newVal, oldVal) {
                            console.log('person属性发生变化了，新值是：' + newVal + '，旧值是：' + oldVal)

                            // 模拟异步数据提交
                            setTimeout(() => {
                                alert(`向后台提交人员信息` + JSON.stringify(newVal)) 
                            })
                        },

                        // 标识立即执行：即在初始化时就执行一次
                        immediate: true,

                        // watch默认是浅层监听，只有在被监听属性本身发生变化时才会触发回调，它监听不到属性对象内部的数据变化。
                        // 标识深度监听：即在被监听数据是一个对象时，是否深度监听其内部属性，默认是false，即只监听对象本身
                        deep: true, 
                    }
                },

                computed: {
                   
                },

                methods: {
                    updatePerson() {
                        // 更新person
                        this.person.name = this.person.name + '--',
                        this.person.age = this.person.age + 1,
                        this.person.likes = [...this.person.likes, '打怪兽']
                        
                    }
                }
            })

            const vm = app.mount('#app')
        </script>
    </body>
</html>